<template>
<div class="studentRecords">
   <div class="studentRecordss">
        <h3 class="records">消费纪录</h3>
   </div>
    <ul>
        <li v-for="item in arr" class="list" v-bind:key="item.id">
            <span>{{item.No}}</span>
            <span>{{item.foodName}}</span>
            <span>{{item.price}}</span>
            <span>{{item.timer}}</span>
        </li>
    </ul>
</div>
</template>
<script>
export default {
  name: 'appDetails',
  data() {
    return {
      arr: [
        {
          No: 1,
          foodName: '青椒土豆丝',
          price: '10.00',
          timer: '2018-05-10'
        },
        {
          No: 2,
          foodName: '西红柿炒鸡蛋',
          price: '10.00',
          timer: '2018-05-10'
        },
        {
          No: 3,
          foodName: '鸡腿',
          price: '10.00',
          timer: '2018-05-10'
        },
        {
          No: 4,
          foodName: '米饭',
          price: '10.00',
          timer: '2018-05-10'
        },
        {
          No: 5,
          foodName: '炒青菜',
          price: '10.00',
          timer: '2018-05-10'
        }
      ]
    }
  }
}
</script>
<style lang="scss">
$em-base: 75;
@import '../../common/mixin/_bourbon.scss';
.studentRecordss {
  margin-top: rem(10px);
  padding: 0 rem(26px);
  background: #ffffff;
  .records {
    height: rem(106px);
    font-size: 24px;
    background-color: #ffffff;
    line-height: rem(106px);
    padding-left: rem(100px);
    background-image: url('./squ.png');
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 36px 36px;
    color: #353535;
  }
}
.list {
  display: flex;
  height: rem(84px);
  line-height: rem(84px);

  span {
    flex: 1;
    text-align: center;
  }
  &:nth-child(2n) {
    background: #ffffff;
  }
}
</style>
